<!DOCTYPE html>
<html>
  <head>
    <title>4PX-UED | 简单窗口布局</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="renderer" content="webkit">

<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/fpx.ued.css" type="text/css">
<link rel="stylesheet" href="css/fpx.ued.skyblue.css" type="text/css">
<link rel="stylesheet" href="css/fpx.ued.override.css" type="text/css">
<link rel="stylesheet" href="plugins/iconfont/iconfont.css" type="text/css">
<link rel="stylesheet" href="plugins/icheck/all.css" type="text/css">
<link rel="stylesheet" href="plugins/select2/select2.min.css" type="text/css">
<link href="plugins/validate/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<link href="plugins/validate/tip.css" rel="stylesheet"  type="text/css" />
<link rel="stylesheet" href="plugins/layer/skin/layer.css" type="text/css" />
<link rel="stylesheet" href="css/fpx.ued.demo.css" type="text/css">

  </head>
  <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">
		<!-- Main Header -->
      <header class="main-header">
		<div class="topbar-head topbar-left">
			<a href="http://home.i4px.com/" class="topbar-logo topbar-left px-home" ><i class="iconfont icon-home"></i></a>
			<a href="index.html" class="topbar-home-link topbar-btn topbar-left">UED</a>
		</div>
		
		<div class="topbar-nav topbar-left dropdown" dropdown="">
			<a href="#" role="menuitem" aria-haspopup="true" class="dropdown-toggle topbar-btn topbar-nav-btn" data-toggle="dropdown">
				<span class="ng-binding">产品与服务</span>
				<i class="iconfont icon-xiangxia1"></i>
			</a>
			<!-- 顶级菜单 -->
			<div id="fpx-topmenu" class="dropdown-menu topbar-nav-list topbar-clearfix"></div>
		</div>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li class="dropdown messages-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="iconfont icon-email"></i>
                  <span class="label label-success">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 0 条消息未阅读</li>
                  <li>
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <h5>
                            暂时没有新的消息
                          </h5>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有消息</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown notifications-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="iconfont icon-tongzhi"></i>
                  <span class="label label-warning">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 0 条通知</li>
                  <li>
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <h5>
                            暂时没有新的通知
                          </h5>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有通知</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown tasks-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <i class="iconfont icon-mark"></i>
                  <span class="label label-danger">0</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="header">你有 0 个工作任务未做</li>
                  <li>
                    <ul class="menu">
                      <li>
                        <a href="#">
                          <h5>
                            暂时没有新的任务
                          </h5>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="footer">
                    <a href="#">查看所有任务</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown user user-menu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  <img src="img/default_user.png" class="user-image" alt="User Image">
                  <span class="hidden-xs fpx-account">4px</span>
                </a>
                <ul class="dropdown-menu">
                  <li class="user-header">
                    <img src="img/default_user.png" class="img-circle" alt="User Image">
                    <p>
                    <h4>
                      <div class="fpx-account">4px</div>
                    </h4>
                    </p>
                  </li>
                  <li class="user-footer text-center">
                    <button class="btn btn-primary btn-flat btn-changepsd">修改密码</button>
                    <a class="btn btn-default btn-flat btn-logout" href="/logout">注销</a>
                  </li>
                </ul>
              </li>
              
              <li>
                <a href="#" data-toggle="control-sidebar"><i class="iconfont icon-shezhi"></i></a>
              </li>
            </ul>
          </div>
        </nav>
        
        <!-- Control Sidebar -->
      <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
          <li class="active"><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="iconfont icon-skin"></i></a></li>
          <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="iconfont icon-duoyuyan"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <!-- Home tab content -->
          <div class="tab-pane active" id="control-sidebar-home-tab">
            <h3 class="control-sidebar-heading">Recent Activity</h3>
            <ul class="control-sidebar-menu">
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-birthday-cake bg-red"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
                    <p>Will be 23 on April 24th</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-user bg-yellow"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
                    <p>New phone +1(800)555-1234</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
                    <p>nora@example.com</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <i class="menu-icon fa fa-file-code-o bg-green"></i>
                  <div class="menu-info">
                    <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
                    <p>Execution time 5 seconds</p>
                  </div>
                </a>
              </li>
            </ul><!-- /.control-sidebar-menu -->

            <h3 class="control-sidebar-heading">Tasks Progress</h3>
            <ul class="control-sidebar-menu">
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Custom Template Design
                    <span class="label label-danger pull-right">70%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Update Resume
                    <span class="label label-success pull-right">95%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Laravel Integration
                    <span class="label label-warning pull-right">50%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript::;">
                  <h4 class="control-sidebar-subheading">
                    Back End Framework
                    <span class="label label-primary pull-right">68%</span>
                  </h4>
                  <div class="progress progress-xxs">
                    <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                  </div>
                </a>
              </li>
            </ul><!-- /.control-sidebar-menu -->

          </div><!-- /.tab-pane -->
          <!-- Settings tab content -->
          <div class="tab-pane" id="control-sidebar-settings-tab">
            <form method="post">
              <h3 class="control-sidebar-heading">Language Settings</h3>
              
              <div class="form-group">
              	<div class="col-md-6 text-center">
                	<img src="img/zh.jpg" />
               	 	<h6 style="color: #fff;">简体中文</h6>
              	</div>
              	<div class="col-md-6 text-center">
              		<img src="img/en.jpg" />
              		<h6 style="color: #fff;">English</h6>
              	</div>
              </div>

            </form>
          </div><!-- /.tab-pane -->
        </div>
      </aside><!-- /.control-sidebar -->
        
      </header>
		<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
	<!-- sidebar: style can be found in sidebar.less -->
	<section class="sidebar">

		<!-- /.search form -->
		<i class="iconfont icon-sanshuxian sidebar-toggle" data-toggle="offcanvas" role="button"></i>
		<ul class="sidebar-menu">
			<li class="active treeview">
				<a href="index.html"><i class="iconfont icon-logoued"></i> <span>UED详细介绍</span></a>
			</li>
			<li>
				<a href="layout.html"><i class="iconfont icon-layout"></i> <span>页面布局规范</span></a>
			</li>
			<li>
				<a href="color.html"><i class="iconfont icon-color"></i> <span>标准颜色规范</span></a>
			</li>
			<li>
				<a href="font.html"><i class="iconfont icon-font"></i> <span>标准字体规范</span></a>
			</li>
			<li>
				<a href="padding.html"><i class="iconfont icon-padding"></i> <span>界面元素间距规范</span></a>
			</li>
			<li>
				<a href="table.html"><i class="iconfont icon-table"></i> <span>常用表格</span></a>
			</li>
			<li>
				<a href="validate.html"><i class="iconfont icon-xiaoyan"></i> <span>表单校验</span></a>
			</li>
			<li>
				<a href="autoCompleter.html"><i class="iconfont icon-guanli"></i> <span>输入框自动联想</span></a>
			</li>
			<li class="treeview">
				<a href="#"><i class="iconfont icon-form"></i> <span>表单设计规范</span><i class="iconfont icon-more pull-right"></i></a>
				<ul class="treeview-menu">
					<li>
						<a href="form_layer.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>通用双向联动表单布局</a>
					</li>
					<li>
						<a href="accross_page_check.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>跨页全选交互</a>
					</li>
				</ul>
			</li>
			<li class="treeview">
				<a href="#"><i class="iconfont icon-component24"></i> <span>组件引用规范</span><i class="iconfont icon-more pull-right"></i></a>
				<ul class="treeview-menu">
					<li>
						<a href="component.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>表单通用组件</a>
					</li>
					<li>
						<a href="component_control_sidebar.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>侧边栏</a>
					</li>
					<li>
						<a href="info_box.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>信息框</a>
					</li>
				</ul>
			</li>
			<li class="treeview">
				<a href="#popUp"><i class="iconfont icon-widget-fullcolumn"></i> <span>弹层规范</span><i class="iconfont icon-more pull-right"></i></a>
				<ul class="treeview-menu">
					<li>
						<a href="complexPopUp.html"><i class="iconfont icon-yuanxingweixuanzhong"></i>复杂双栏交互弹窗布局</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="popup_layer.html"><i class="iconfont icon-yicaozuo"></i> <span>操作交互弹出层</span></a>
			</li>
			<li>
				<a href="info_layer.html"><i class="iconfont icon-ui"></i> <span>信息提示弹层</span></a>
			</li>
			<li>
				<a href="icon.html"><i class="iconfont icon-icon"></i> <span>图标引用规范</span></a>
			</li>
			<li>
				<a href="plugins.html"><i class="iconfont icon-478chajianku"></i><span> 插件</span></a>
			</li>
			<li>
				<a href="browsers.html"><i class="iconfont icon-iconfont"></i><span> 浏览器支持</span></a>
			</li>
			<li>
				<a href="tmpl.html"><i class="iconfont icon-example"></i><span> 模板页面</span></a>
			</li>
			<li>
				<a href="download.html"><i class="iconfont icon-down"></i><span>下载UED</span></a>
			</li>
		</ul>

	</section>
	<!-- /.sidebar -->
</aside>
			
		<div class="content-wrapper">
        <section class="content-header">
          <span class="nav-title">简单窗口布局</span>
        </section>
        <!-- Main content -->
        <section class="content">
					<ul>
						<li>1. 此类弹层默认于屏幕居中显示，窗体包含标题栏、关闭按钮、内容区、操作按钮区；</li>
						<li>2. 各元素排版布局依据布局规范，文字颜色及大小依据标准颜色与字体规范，窗体标题栏颜色按不同功能遵从标准颜色规范；</li>
						<li>3. 弹层窗体无固定尺寸，在规范布局的前提下根据内容自动缩放。</li>
					</ul>
					<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">弹出框示例</button>
					<!--modal -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
							<div class="modal-dialog" style="width: 500px;">
							<div class="modal-content">
								<div class="modal-header primary">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
									<h4 class="modal-title" id="myModalLabel">编辑</h4>
								</div>
								
								<div class="modal-body clearfix">
									<form class="form-horizontal">
									  <div class="form-group col-sm-12 ">
											<label class="control-label col-sm-3">小包号</label>
											<div class=" col-sm-9">
												<input type="text" id="mailNo1" value="" placeholder="小包号" class="form-control" readonly="">
											</div>
										</div>
									
									   <div class="form-group col-sm-12 ">
											<label class="control-label col-sm-3">小包状态</label>
											<div class=" col-sm-9">
												<select class="form-control" id="edit_businesCode">
													<option value="O1">待入库</option>
													<option value="O2">已入库</option>
													<option value="O3">已出库</option>
													<option value="O4">已销毁</option>
													<option value="O5">待确认</option>
													<option value="O6">待重派</option>
													<option value="O7">已重派</option>
												</select>
											</div>
										</div>
										
										<div class="form-group col-sm-12 ">
											<label class="control-label col-sm-3">是否异常</label>
											<div class=" col-sm-9">
												<select class="form-control" id="edit_status">
														<option value="0">是</option>
														<option value="1">否</option>
													</select>
												</div>
											</div>
											
											<div class="form-group col-sm-12 " id="errmsg" style="display: none;">
												<label class="control-label col-sm-3">异常详情</label>
												<div class=" col-sm-9 exception-detail">
													<label><input type="checkbox" name="echeckbox" value="重量异常">重量异常</label>
													<label><input type="checkbox" name="echeckbox" value="破损">破损</label>
													<label><input type="checkbox" name="echeckbox" value="空包">空包</label>
													<label><input type="checkbox" name="echeckbox" value="非菜鸟货">非菜鸟货</label>
													<label><input type="checkbox" name="echeckbox" value="无预报数据">无预报数据</label>
												</div>
											</div>
											</form>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-primary" id="editsave">保存</button>
										<button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
									</div>
								</div>
							</div>
						</div>
					<pre class="prettyprint">
						&LT;div id="myModal" class="modal fade" tabindex="-1" role="dialog">
							&LT;div class="modal-dialog" style="width: 500px;">
							&LT;div class="modal-content">
								&LT;div class="modal-header primary">
									&LT;button type="button" class="close" data-dismiss="modal" aria-hidden="true">×&LT;/button>
									&LT;h4 class="modal-title" id="myModalLabel">编辑&LT;/h4>
								&LT;/div>
								
								&LT;div class="modal-body clearfix">
									&LT;form class="form-horizontal">
									  &LT;div class="form-group col-sm-12 ">
											&LT;label class="control-label col-sm-3">小包号&LT;/label>
											&LT;div class=" col-sm-9">
												&LT;input type="text" id="mailNo1" value="" placeholder="小包号" class="form-control" readonly="">
											&LT;/div>
										&LT;/div>
									
									   &LT;div class="form-group col-sm-12 ">
											&LT;label class="control-label col-sm-3">小包状态&LT;/label>
											&LT;div class=" col-sm-9">
												&LT;select class="form-control" id="edit_businesCode" style="width: 100%;">
													&LT;option value="O1">待入库&LT;/option>
													&LT;option value="O2">已入库&LT;/option>
													&LT;option value="O3">已出库&LT;/option>
													&LT;option value="O4">已销毁&LT;/option>
													&LT;option value="O5">待确认&LT;/option>
													&LT;option value="O6">待重派&LT;/option>
													&LT;option value="O7">已重派&LT;/option>
												&LT;/select>
											&LT;/div>
										&LT;/div>
										
										&LT;div class="form-group col-sm-12 ">
											&LT;label class="control-label col-sm-3">是否异常&LT;/label>
											&LT;div class=" col-sm-9">
												&LT;select class="form-control" id="edit_status" style="width: 100%;">
														&LT;option value="0">是&LT;/option>
														&LT;option value="1">否&LT;/option>
													&LT;/select>
												&LT;/div>
											&LT;/div>
											
											&LT;div class="form-group col-sm-12 " id="errmsg" style="display: none;">
												&LT;label class="control-label col-sm-3">异常详情&LT;/label>
												&LT;div class=" col-sm-9 exception-detail">
													&LT;label>&LT;input type="checkbox" name="echeckbox" value="重量异常">重量异常&LT;/label>
													&LT;label>&LT;input type="checkbox" name="echeckbox" value="破损">破损&LT;/label>
													&LT;label>&LT;input type="checkbox" name="echeckbox" value="空包">空包&LT;/label>
													&LT;label>&LT;input type="checkbox" name="echeckbox" value="非菜鸟货">非菜鸟货&LT;/label>
													&LT;label>&LT;input type="checkbox" name="echeckbox" value="无预报数据">无预报数据&LT;/label>
												&LT;/div>
											&LT;/div>
											&LT;/form>
									&LT;/div>
									&LT;div class="modal-footer">
										&LT;button type="button" class="btn btn-info" id="editsave">保存&LT;/button>
										&LT;button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭&LT;/button>
									&LT;/div>
								&LT;/div>
							&LT;/div>
						&LT;/div>
					</pre>

				</section>
	</div>
	</div>
	<script src="./plugins/jquery/jquery.min.js"></script>
<script src="./plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./js/app.min.js"></script>
<script src="./js/fpx.topbar.js"></script>
<script src="./plugins/select2/select2.full.min.js"></script>
<script src="./plugins/icheck/icheck.min.js"></script>
<script src="./plugins/validate/jquery.validate.min.js"></script>
<script src="./plugins/validate/jquery.qtip.min.js"></script>
<script src="./plugins/validate/fpx.tip.js"></script>
<script src="./plugins/validate/fpx.validation.js"></script>
<script src="./plugins/layer/layer.js"></script>
<script src="./js/docs.js"></script>
<script src="./js/index.js"></script>
  </body>
</html>
